import { useEditorModel } from '@/lib/editor';
import { Checkbox, Popover } from 'antd';
import { observer } from 'mobx-react';

import { RelativeShipMap, RelationShipDSL } from '../../dsl';
import { DomainEditorModel } from '../../model';

import s from './index.module.scss';

export interface RelationShipSelectProps {}

export const RelationShipList = [
  {
    label: (
      <span className={s.item}>
        {RelativeShipMap[RelationShipDSL.Aggregation]}
        <svg width="100" height="1em" viewBox="0 0 122 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.339746 12L9 20.6603L17.6603 12L9 3.33975L0.339746 12ZM121.061 13.0607C121.646 12.4749 121.646 11.5251 121.061 10.9393L111.515 1.3934C110.929 0.807612 109.979 0.807612 109.393 1.3934C108.808 1.97918 108.808 2.92893 109.393 3.51472L117.879 12L109.393 20.4853C108.808 21.0711 108.808 22.0208 109.393 22.6066C109.979 23.1924 110.929 23.1924 111.515 22.6066L121.061 13.0607ZM9 13.5H120V10.5H9V13.5Z" />
        </svg>
      </span>
    ),
    value: RelationShipDSL.Aggregation,
  },
  {
    label: (
      <span className={s.item}>
        {RelativeShipMap[RelationShipDSL.Association]}
        <svg width="100" height="1em" viewBox="0 0 113 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M112.061 13.0607C112.646 12.4749 112.646 11.5251 112.061 10.9393L102.515 1.3934C101.929 0.807612 100.979 0.807612 100.393 1.3934C99.8076 1.97918 99.8076 2.92893 100.393 3.51472L108.879 12L100.393 20.4853C99.8076 21.0711 99.8076 22.0208 100.393 22.6066C100.979 23.1924 101.929 23.1924 102.515 22.6066L112.061 13.0607ZM0 13.5H111V10.5H0V13.5Z" />
        </svg>
      </span>
    ),
    value: RelationShipDSL.Association,
  },
  // { label: RelativeShipMap[RelationShipDSL.Composition], value: RelationShipDSL.Composition },
  {
    label: (
      <span className={s.item}>
        {RelativeShipMap[RelationShipDSL.Dependency]}
        <svg width="100" height="1em" viewBox="0 0 227 46" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M225.065 24.0559C225.649 23.4675 225.644 22.5177 225.056 21.9346L215.467 12.4316C214.879 11.8484 213.929 11.8527 213.346 12.4411C212.763 13.0295 212.767 13.9792 213.355 14.5624L221.879 23.0095L213.432 31.5328C212.848 32.1212 212.853 33.0709 213.441 33.6541C214.029 34.2372 214.979 34.233 215.562 33.6445L225.065 24.0559ZM1.00673 25.5L3.94094 25.4868L3.92748 22.4869L0.993274 22.5L1.00673 25.5ZM9.80936 25.4605L15.6778 25.4342L15.6643 22.4342L9.7959 22.4605L9.80936 25.4605ZM21.5462 25.4079L27.4146 25.3816L27.4012 22.3816L21.5327 22.4079L21.5462 25.4079ZM33.283 25.3552L39.1515 25.3289L39.138 22.329L33.2696 22.3553L33.283 25.3552ZM45.0199 25.3026L50.8883 25.2763L50.8749 22.2763L45.0064 22.3026L45.0199 25.3026ZM56.7567 25.25L62.6252 25.2237L62.6117 22.2237L56.7433 22.25L56.7567 25.25ZM68.4936 25.1974L74.362 25.171L74.3485 22.1711L68.4801 22.1974L68.4936 25.1974ZM80.2304 25.1447L86.0988 25.1184L86.0854 22.1184L80.217 22.1448L80.2304 25.1447ZM91.9672 25.0921L97.8357 25.0658L97.8222 22.0658L91.9538 22.0921L91.9672 25.0921ZM103.704 25.0395L109.572 25.0131L109.559 22.0132L103.691 22.0395L103.704 25.0395ZM115.441 24.9868L121.309 24.9605L121.296 21.9605L115.427 21.9869L115.441 24.9868ZM127.178 24.9342L133.046 24.9079L133.033 21.9079L127.164 21.9342L127.178 24.9342ZM138.915 24.8816L144.783 24.8552L144.77 21.8553L138.901 21.8816L138.915 24.8816ZM150.651 24.8289L156.52 24.8026L156.506 21.8026L150.638 21.829L150.651 24.8289ZM162.388 24.7763L168.257 24.75L168.243 21.75L162.375 21.7763L162.388 24.7763ZM174.125 24.7237L179.994 24.6974L179.98 21.6974L174.112 21.7237L174.125 24.7237ZM185.862 24.671L191.73 24.6447L191.717 21.6448L185.849 21.6711L185.862 24.671ZM197.599 24.6184L203.467 24.5921L203.454 21.5921L197.585 21.6184L197.599 24.6184ZM209.336 24.5658L215.204 24.5395L215.191 21.5395L209.322 21.5658L209.336 24.5658ZM221.073 24.5131L224.007 24.5L223.993 21.5L221.059 21.5132L221.073 24.5131ZM226.131 25.1118C227.297 23.935 227.289 22.0355 226.112 20.8692L206.934 1.86311C205.758 0.696803 203.858 0.705321 202.692 1.88214C201.526 3.05895 201.534 4.95843 202.711 6.12473L219.757 23.019L202.863 40.0655C201.697 41.2423 201.705 43.1418 202.882 44.3081C204.059 45.4744 205.958 45.4659 207.125 44.2891L226.131 25.1118ZM1.01345 27L3.94766 26.9868L3.92076 20.9869L0.986547 21L1.01345 27ZM9.81608 26.9605L15.6845 26.9342L15.6576 20.9342L9.78918 20.9606L9.81608 26.9605ZM21.5529 26.9079L27.4213 26.8815L27.3944 20.8816L21.526 20.9079L21.5529 26.9079ZM33.2898 26.8552L39.1582 26.8289L39.1313 20.829L33.2629 20.8553L33.2898 26.8552ZM45.0266 26.8026L50.895 26.7763L50.8681 20.7763L44.9997 20.8027L45.0266 26.8026ZM56.7635 26.75L62.6319 26.7237L62.605 20.7237L56.7366 20.75L56.7635 26.75ZM68.5003 26.6973L74.3687 26.671L74.3418 20.6711L68.4734 20.6974L68.5003 26.6973ZM80.2371 26.6447L86.1056 26.6184L86.0786 20.6185L80.2102 20.6448L80.2371 26.6447ZM91.974 26.5921L97.8424 26.5658L97.8155 20.5658L91.9471 20.5921L91.974 26.5921ZM103.711 26.5394L109.579 26.5131L109.552 20.5132L103.684 20.5395L103.711 26.5394ZM115.448 26.4868L121.316 26.4605L121.289 20.4606L115.421 20.4869L115.448 26.4868ZM127.184 26.4342L133.053 26.4079L133.026 20.4079L127.158 20.4342L127.184 26.4342ZM138.921 26.3815L144.79 26.3552L144.763 20.3553L138.894 20.3816L138.921 26.3815ZM150.658 26.3289L156.527 26.3026L156.5 20.3027L150.631 20.329L150.658 26.3289ZM162.395 26.2763L168.263 26.25L168.237 20.25L162.368 20.2763L162.395 26.2763ZM174.132 26.2237L180 26.1973L179.973 20.1974L174.105 20.2237L174.132 26.2237ZM185.869 26.171L191.737 26.1447L191.71 20.1448L185.842 20.1711L185.869 26.171ZM197.606 26.1184L203.474 26.0921L203.447 20.0921L197.579 20.1185L197.606 26.1184ZM209.342 26.0658L215.211 26.0394L215.184 20.0395L209.316 20.0658L209.342 26.0658ZM221.079 26.0131L224.013 26L223.987 20L221.052 20.0132L221.079 26.0131Z"
            fill="black"
          />
        </svg>
      </span>
    ),
    value: RelationShipDSL.Dependency,
  },
];

export const RelationShipSelect = observer(function RelationShipSelect(props: RelationShipSelectProps) {
  const { model } = useEditorModel<DomainEditorModel>();
  const list = model.domainEditorViewModel.relationShipVisible;

  return (
    <div className={s.root}>
      <Popover
        content={
          <Checkbox.Group
            className={s.checkbox}
            options={RelationShipList}
            value={list}
            // @ts-expect-error
            onChange={model.domainEditorViewModel.setRelationShipVisible}
          ></Checkbox.Group>
        }
        placement="bottomRight"
        trigger="click"
      >
        <label>
          关系展示:
          <span className={s.value}>
            {list.length === RelationShipList.length
              ? '所有'
              : !list.length
              ? '关闭'
              : list.map(i => RelativeShipMap[i]).join(', ')}
          </span>
        </label>
      </Popover>
    </div>
  );
});
